<template>
  <Layout>
    <!-- <div class="row">
      <div class="col-12">
        <div class="page-title-box">
          <h4 class="mb-0">
            虚拟服务器详情
          </h4>
        </div>
      </div>
    </div> -->
    <PageHeaderNew :items="items"></PageHeaderNew>
    <div class="row">
      <div class="col-md-3" v-for="(data, index) in statData" :key="index">
        <div class="card">
          <div class="card-body">
            <div class="media">
              <div class="media-body text-center overflow-hidden">
                <p class="text-truncate font-size-14 mb-2">{{ data.title }}</p>
                <h4 class="mb-0">{{ data.value }}</h4>
                <div style="display:inline-block;">{{data.desc}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="card" style="padding-top: 20px;">
      <div class="row col-md-12">
        <div class="col-md-3">
          <div class="form-group row" style="align-items: center;">
            <label class="col-md-4 padding-right col-form-label"
              >IP地址</label
            >
            <div class="col-md-8">
              192.168.71.63
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="form-group row" style="align-items: center;">
            <label class="col-md-4 padding-right col-form-label"
              >操作系统</label
            >
            <div class="col-md-8">
              Linux  Ubuntu 11.4
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="form-group row" style="align-items: center;">
            <label class="col-md-4 padding-right col-form-label"
              >运行状态</label
            >
            <div class="col-md-8">
              活动
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="form-group row" style="align-items: center;">
            <label class="col-md-4 padding-right col-form-label"
              >计算环境</label
            >
            <div class="col-md-8">
              测试环境
            </div>
          </div>
        </div>
      </div>
      <div class="row col-md-12">
        <div class="col-md-3">
          <div class="form-group row" style="align-items: center;">
            <label class="col-md-4 padding-right col-form-label"
              >启动时长</label
            >
            <div class="col-md-8">
              213天20小时40分钟20秒
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="form-group row" style="align-items: center;">
            <label class="col-md-4 padding-right col-form-label"
              >系统进程数</label
            >
            <div class="col-md-8">
              200
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="form-group row" style="align-items: center;">
            <label class="col-md-4 padding-right col-form-label"
              >文件句柄数</label
            >
            <div class="col-md-8">
              100
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="form-group row" style="align-items: center;">
            <label class="col-md-4 padding-right col-form-label"
              >网络连接数</label
            >
            <div class="col-md-8">
              20000
            </div>
          </div>
        </div>
      </div>
      <div class="row col-md-12">
        <div class="col-md-3">
          <div class="form-group row" style="align-items: center;">
            <label class="col-md-4 padding-right col-form-label"
              >加入时间</label
            >
            <div class="col-md-8">
              2021-08-13
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="form-group row" style="align-items: center;">
            <label class="col-md-4 padding-right col-form-label"
              >最后检测时间</label
            >
            <div class="col-md-8">
              2分钟前
            </div>
          </div>
        </div>
        <!-- <div class="col-md-3">
          <div class="form-group row" style="align-items: center;">
            <div class="col-md-12">
              查看系统密码
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="form-group row" style="align-items: center;">
            <div class="col-md-12">
              进入Linux控制台
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="form-group row" style="align-items: center;">
            <div class="col-md-12">
              立刻检测状态
            </div>
          </div>
        </div> -->
      </div>
    </div>
    <div class="row">
      <div class="col-xl-12">
        <div class="card">
          <div class="card-body">
            <div class="allNum">
              <div class="searchNum">
                找到应用服务器<span>2</span>台。
              </div>
              <div>
                <b-dropdown dropup variant="secondary" class="butn">
                  <template slot="button-content">
                    <i class="ri-add-line align-middle" style="font-size: 1rem;"></i>
                    <span style="margin:0 20px 0 6px;">管理虚拟服务器</span>
                    <i class="mdi mdi-chevron-up"></i>
                  </template>
                  <b-dropdown-item-button @click="addServer">添加虚拟服务器</b-dropdown-item-button>
                  <b-dropdown-item-button>查看系统密码</b-dropdown-item-button>
                  <b-dropdown-item-button>进入Linux控制台</b-dropdown-item-button>
                  <b-dropdown-item-button>立刻检测状态</b-dropdown-item-button>
                  <b-dropdown-item-button>删除服务器</b-dropdown-item-button>
                </b-dropdown>
              </div>
            </div>
            <div class="table-responsive">
              <b-table
                class="table-centered"
                :items="ordersData"
                :fields="fields"
                responsive="sm"
                :per-page="perPage"
                :current-page="1"
                thead-class="thead-light"
                @filtered="onFiltered"
              >
                <template v-slot:cell(type)="row">
                  <div @click="jump" class="pointer">{{ row.value}}</div>
                </template>
                <template v-slot:cell(activeState)="row">
                  <div v-if="row.value=='正常'" class="badge font-size-12 badge-soft-success">{{ row.value}}</div>
                  <div v-if="row.value=='异常'" class="badge font-size-12 badge-soft-danger">{{ row.value}}</div>
                </template>
              </b-table>
            </div>
            <div class="row">
              <div class="col">
                <div class="dataTables_paginate paging_simple_numbers float-right">
                  <ul class="pagination pagination-rounded mb-0">
                    <b-pagination v-model="currentPage" :total-rows="totalRows" :per-page="perPage"></b-pagination>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </Layout>
</template>
<script>
import Layout from "../../layouts/main";
import PageHeaderNew from "@/components/page-header-new";
export default {
  components: {
    Layout,
    PageHeaderNew,
  },
  data () {
    return {
      items: [
        {
          text: "计算资源",
          url: "/computing",
        },{
          text: "虚拟服务器详情",
          url: "/",
        }
      ],
      statData: [
        {
          title: "应用服务器",
          icon: "ri-stack-line",
          value: "2个",
          desc: "实例",
        },
        {
          title: "系统CPU",
          icon: "ri-store-2-line",
          value: "32",
          desc: "核",
        },
        {
          title: "系统内存",
          icon: "ri-store-2-line",
          value: "1TB",
          desc: "已使用  55%  320G",
        },
        {
          title: "系统磁盘",
          icon: "ri-briefcase-4-line",
          value: "40TB",
          desc: "已使用  50%  2000G",
        },
      ],
      ordersData: [
        {
          type: "MySQL",
          processNum: "324",
          userPassword: "admin/123456",
          activeState: "正常",
          runTime: "6天5小时",
          detectionTime: "2021-09-18",
        },{
          type: "Kafka",
          processNum: "4432",
          userPassword: "-",
          activeState: "异常",
          runTime: "2天16小时",
          detectionTime: "2021-09-18",
        }
      ],
      totalRows: 100,
      currentPage: 1,
      perPage: 10,
      fields: [
        { key: "type", label: "应用服务器类型" },
        { key: "processNum", label: "进程号" },
        { key: "userPassword", label: "用户/密码" },
        { key: "activeState", label: "活动状态" },
        { key: "runTime", label: "运行时长" },
        { key: "detectionTime", label: "最后检测时间" },
      ],
    }
  },
  watch: {
    "currentPage": {
      handler(){
        console.log("触发更新");
      }
    }
  },
  methods: {
    onFiltered(filteredItems) {
      this.totalRows = filteredItems.length;
      this.currentPage = 1;
    },
    addServer(){
      this.$router.push('/computing/addFictitious')
    },
    jump(){
      this.$router.push('/computing/applicationDetail')
    },
  }
}
</script>
<style lang="scss" scoped>
.delServer{
  font-weight: normal;
  font-size: 0.7rem;
  margin-left: 10px;
  color: #74788d;
}
.allNum{
  padding-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.searchNum{
  span{
    font-size: 1rem;
    color: #3444c1;
    margin: 0 4px;
    font-weight: 600;
  }
  p{
    display: inline-block;
    color: #999999;
    margin-left: 4px;
    margin-bottom: 0px;
  }
}
.col-form-label{
  color: #999999;
}
.padding-right {
  padding-right: 0;
}
.butn{
  ::v-deep .btn{
    background-color: #252b3b;
    border-color: #252b3b;
    border-radius: 30px;
    display: flex;
    align-items: center;
  }
  ::v-deep .btn-secondary.focus {
    box-shadow: 0 0 0 0.15rem rgb(37 40 58 / 50%);
  }
}
</style>
